<template>
	<div>
		<div v-show="logData.length > 0 " class="log_view" v-for="(item,index) in logData"  :key="index">
			<span class="sql">{{item.sqlText}}</span><br/>
			<span class="time">Runing &nbsp;{{item.runMessage}}</span><br/>
			<div v-if="item.sqlTips != ''" class="sqlTips">{{item.sqlTips}}</div>
			<div class="splitLine"></div>
		</div>
		<!--<div class="pagination" v-show="logData.length > 0 ">
			<a-pagination  show-less-items
										 v-model="current"
										 :total="logData.length"
										 @change="indexChange"
			/>
		</div>-->
		<div v-show="logData.length == 0 " style="height: 168px"></div>
	</div>
</template>

<script lang="ts">
	import {Component, Prop, Vue } from 'vue-property-decorator'
	@Component({
		components: {
		}
	})
	export default class SelfQuery extends Vue {
		@Prop() private logData:any
		private logList = []
		private current = 1
		private pageSize = 1
		private logTotal = 1

		/*//点击分页的事件
		indexChange(current, pageSize){
			//固定每次展示10条数据，current就是第几页
			if(this.logData.length <= current*10 ){
				console.log("indexChange=",current, pageSize)
				this.logList = []
			}
			console.log("indexChange=",current, pageSize)
		}*/

	}
</script>

<style lang="scss" scoped>
.log_view{
	padding: 10px 20px 10px 20px;
	.time{
		font-size: 16px;
	}
	.sql{
		font-size: 20px;
	}
	.sqlTips{
		font-size: 16px;
		color: red;
	}
	.splitLine{
		width: 100%;
		border-bottom: dotted #f1f1f1 ;
	}
}
	.pagination{
		float: right;
		margin-right: 10px;
		margin-bottom: 5px;
	}
</style>
